<template>
  <view class="flex-col homepage">
    <view class="flex-col wrapper">
      <view class="flex-center">
        <view class="flex-row wraper-row">
          <u-icon name="moments" size="20px" color="#ffffff"></u-icon
          ><text class="text"> 等待付款 </text>
        </view>
        <view class="flex-row wraper-row-two">
          <text class="text-two">
            应付金额: ¥{{ OrderDetailsMessage.payMoney }}
          </text>
          <text class="text-three">
            <view class="css-time">
              <view>支付剩余</view>
              <u-count-down
                :time="30 * 60 * 1000"
                format="mm分ss秒"
              ></u-count-down>
            </view>
          </text>
        </view>
        <view class="flex-row wraper-row-three">
          <button class="buttonee" @click="Gopay" color="#ffffff">
            去支付
          </button>
        </view>
      </view>
    </view>
    <view class="flex-row wrapper-two">
      <view class="flex-col wraper-row-four">
        <view
          class="flex-row box"
          v-for="item in OrderDetailsMessage.skus"
          :key="item.id"
        >
          <image class="img" :src="item.picture"></image>
          <view class="flex-col flex-row box-col">
            <view class="u-line-2 text-four">{{ item.name }}</view>
            <view
              class="flex-row container"
              v-for="goods in item.specs"
              :key="goods.name"
            >
              <text class="text-five"> {{ goods.valueName }}</text>
              <text class="text-six"> x{{ item.postFee }} </text>
            </view>
            <view class="text-seven">
              <text class="css-erase-actuallyPaid">￥{{ item.price }}</text>
              <text>实付:￥{{ item.postFee * item.price }} </text>
            </view>
          </view>
        </view>
        <view class="flex-col box-two">
          <view class="flex-row box-row">
            <text class="text-eight"> 商品总价: </text>
            <text class="text-nine">
              ￥{{ OrderDetailsMessage.payMoney }}
            </text>
          </view>
          <view class="flex-row box-row-two">
            <text class="text-ten"> 运费: </text>
            <text class="text-eleven">
              ￥{{ OrderDetailsMessage.postFee }}</text
            >
          </view>
          <view class="flex-row box-row-three">
            <text class="text-twelve"> 实付: </text>
            <text class="text-thirteen">
              ￥{{ OrderDetailsMessage.payMoney }}
            </text>
          </view>
        </view>
      </view>
    </view>
    <view class="flex-col wrapper-three">
      <text class="text-fourteen"> 订单信息 </text>
      <text class="text-fifteen"> 订单编号: {{ OrderDetailsMessage.id }}</text>
      <text class="text-sixteen">
        下单时间: {{ OrderDetailsMessage.createTime }}
      </text>
      <text class="text-seventeen">
        支付方式:{{
          OrderDetailsMessage.payType === 0 ? '在线支付' : '货到付款'
        }}
      </text>
      <text class="text-eighteen">
        支付渠道: {{ OrderDetailsMessage.payState === 0 ? '支付宝' : '微信' }}
      </text>
    </view>
    <view class="flex-row wrapper-four">
      <view class="flex-button-center">
        <button class="button-two">取消订单</button>

        <button class="button-three" @click="Gopay">去支付</button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'dasdaaadqqqq',
  data () {
    return {
      OrderDetailsMessage: {
        arrivalEstimatedTime: null,
        cityCode: '110100',
        closeTime: null,
        consignTime: null,
        countdown: 1800,
        countyCode: '110101',
        createTime: '2023-01-02 03:10:28',
        deliveryTimeType: 1,
        endTime: null,
        evaluationTime: null,
        id: '1609628136436142081',
        orderState: 1,
        payChannel: 1,
        payLatestTime: '2023-01-02 03:40:29',
        payMoney: 1507.0,
        payState: 1,
        payTime: null,
        payType: 1,
        postFee: 0,
        provinceCode: '110000',
        receiverAddress: '北京北京市东城区eqwewqwe',
        receiverContact: 'eqeqw',
        receiverMobile: '18840228855',
        skus: [
          {
            attrsText: 'SleepEase护肩优眠1个装',
            count: 1,
            discount: null,
            id: '1672002',
            isCollect: false,
            isEffective: true,
            name: '睡着放松肩颈泰国93%天然乳胶枕蝶形护肩',
            nowOriginalPrice: '179.00',
            nowPrice: '179.00',
            picture:
              'https://yanxuan-item.nosdn.127.net/9790fcd540d6731ff7febd15ee60a7c5.png',
            postFee: 2,
            price: '179.00',
            selected: true,
            skuId: '300475322',
            specs: [{ name: '规格', valueName: 'SleepEase护肩优眠1个装' }],
            stock: 988
          },
          {
            attrsText: '中号2个装',
            count: 1,
            discount: null,
            id: '1252031',
            isCollect: false,
            isEffective: true,
            name: '换季好帮手，大容量防尘衣物收纳袋',
            nowOriginalPrice: '129.00',
            nowPrice: '129.00',
            picture:
              'https://yanxuan-item.nosdn.127.net/75f6cc2c037c09e957cbcc336cf4a652.png',
            postFee: 8,
            price: '129.00',
            selected: true,
            skuId: '1727081',
            specs: [{ name: '规格', valueName: '中号2个装' }],
            stock: 8199
          },
          {
            attrsText: '大号单个装',
            count: 1,
            discount: null,
            id: '1225018',
            isCollect: false,
            isEffective: true,
            name: '可水洗的布艺收纳盒',
            nowOriginalPrice: '39.00',
            nowPrice: '39.00',
            picture:
              'https://yanxuan-item.nosdn.127.net/5a608974e36c829898df20fd0ebf184a.png',
            postFee: 3,
            price: '39.00',
            selected: true,
            skuId: '1239122',
            specs: [{ name: '规格', valueName: '大号单个装' }],
            stock: 5571
          }
        ],
        totalMoney: 234.9,
        totalNum: 3
      }
    }
  },
  methods: {
    Gopay () {
      uni.showLoading()
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/order/pay_success/index'
        })
        uni.showToast({
          title: '支付成功',
          icon: 'success',
          duration: 2000
        })
      }, 2000)
    }
  }
}
</script>
<style lang="scss" scoped>
/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
}

view,
text,
image {
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
}

.flex-col {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.flex-row {
  display: flex;
  align-items: flex-start;
}

.flex-col .flex-row {
  display: flex;
  align-items: center;
  width: 100%;
}

/** 全局样式-结束*/

.homepage {
  height: 1334rpx;
  background: #f4f4f4;

  .wrapper {
    width: 100%;
    margin-bottom: 20rpx;

    background: #00ceaa;

    .flex-center {
      width: 375px;
      margin: 0 auto;
      padding: 146rpx 0rpx 22rpx 129rpx;
    }
    .wraper-row {
      width: 198rpx;
      justify-content: space-between;
      margin: 0rpx 0rpx 34rpx 130rpx;

      .text {
        font-size: 36rpx;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .wraper-row-two {
      display: flex;
      width: 367rpx;
      justify-content: space-between;
      margin: 0rpx 0rpx 18rpx 60rpx;
      padding-right: 1rpx;

      .text-two {
        font-size: 24rpx;
        line-height: 28rpx;
        color: #ffffff;
      }

      .text-three {
        font-size: 18rpx;
        line-height: 28rpx;
        color: #ffffff;
        .css-time {
          display: flex;
          align-items: center;

          ::v-deep .u-count-down__text[data-v-072523e7] {
            color: #ffffff;
            font-size: 24rpx;
            line-height: 44rpx;
          }
        }
      }
    }

    .wraper-row-three {
      width: 514rpx;
      height: 84rpx;
      justify-content: center;
      background: #00cfab;
      margin-bottom: 30rpx;
      .buttonee {
        width: 260rpx;
        height: 64rpx;
        text-align: center;
        line-height: 64rpx;
        margin-top: 30rpx;
        font-size: 28rpx;
        color: #27ba9b;
        border-radius: 68rpx;
        background-color: #fff;
      }
    }
  }

  .wrapper-two {
    width: 710rpx;
    justify-content: center;
    margin-right: auto;
    margin-bottom: 20rpx;
    margin-left: auto;
    padding: 30rpx 0rpx;
    background: #ffffff;

    .wraper-row-four {
      width: 670rpx;

      .box {
        width: 670rpx;
        height: 180rpx;
        justify-content: space-between;
        margin-bottom: 14rpx;
        padding: 0rpx 18rpx 0rpx 26rpx;
        border-bottom-width: 2rpx;
        border-bottom-color: #eeeeee;

        .img {
          width: 170rpx;
          height: 170rpx;
          border-radius: 10rpx;
        }

        .box-col {
          width: 442rpx;
          margin-top: 16rpx;

          .text-four {
            width: 100%;
            margin-bottom: 48rpx;
            font-size: 24rpx;
            color: #444;
          }

          .container {
            width: 430rpx;
            justify-content: space-between;
            margin-bottom: -2rpx;

            .text-five {
              font-size: 24rpx;
              background: #f7f7f8;
              line-height: 28rpx;
            }

            .text-six {
              margin-top: 14rpx;
              font-size: 28rpx;
              line-height: 28rpx;
            }
          }

          .text-seven {
            font-size: 24rpx;
            line-height: 28rpx;
            margin-right: 170rpx;
            .css-erase-actuallyPaid {
              margin-right: 10rpx;
              color: #999;
              text-decoration: line-through;
            }
          }
        }
      }

      .box-two {
        width: 100%;
        height: 160rpx;
        padding: 6rpx 0rpx 0rpx 20rpx;

        .box-row {
          width: 632rpx;
          justify-content: space-between;
          margin-bottom: 24rpx;

          .text-eight {
            font-size: 28rpx;
            line-height: 28rpx;
          }

          .text-nine {
            width: 64rpx;
            font-size: 28rpx;
            line-height: 28rpx;
          }
        }

        .box-row-two {
          width: 632rpx;
          justify-content: space-between;
          margin-bottom: 22rpx;

          .text-ten {
            font-size: 28rpx;
            line-height: 28rpx;
          }

          .text-eleven {
            font-size: 28rpx;
            line-height: 28rpx;
          }
        }

        .box-row-three {
          width: 632rpx;
          justify-content: space-between;

          .text-twelve {
            font-size: 28rpx;
            line-height: 28rpx;
          }

          .text-thirteen {
            width: 64rpx;
            font-size: 28rpx;
            line-height: 28rpx;
            color: #cf4444;
          }
        }
      }
    }
  }

  .wrapper-three {
    width: 710rpx;
    height: 422rpx;
    margin-bottom: 132rpx;

    margin-right: auto;
    margin-left: auto;
    padding: 30rpx 0rpx 18rpx 20rpx;
    background: #ffffff;

    .text-fourteen {
      // width: 120rpx;
      margin: 0rpx 0rpx 30rpx 10rpx;
      font-size: 30rpx;
      font-weight: 400;
    }

    .text-fifteen {
      width: 378rpx;
      margin-bottom: 20rpx;
      font-size: 24rpx;
      line-height: 28rpx;
      color: 2rpx;
    }

    .text-sixteen {
      width: 346rpx;
      margin-bottom: 20rpx;
      font-size: 24rpx;
      line-height: 28rpx;
    }

    .text-seventeen {
      width: 206rpx;
      margin-bottom: 14rpx;
      font-size: 24rpx;
      line-height: 28rpx;
    }

    .text-eighteen {
      width: 182rpx;
      font-size: 24rpx;
      line-height: 28rpx;
    }
  }

  .wrapper-four {
    width: 750rpx;
    justify-content: space-between;

    bottom: 0rpx;
    left: 0rpx;
    background: #ffffff;
    position: fixed;

    .flex-button-center {
      width: 375px;
      margin: 0 auto;
      padding: 31rpx 17rpx 31rpx 217rpx;
      display: flex;
    }
    .button-two {
      width: 200rpx;
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      margin-left: 15rpx;
      font-size: 26rpx;
      border-radius: 72rpx;
      background-color: #fff;
      border: 1px solid #cfcfcf;
    }

    .button-three {
      width: 200rpx;
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      margin-left: 15rpx;
      font-size: 26rpx;
      border-radius: 72rpx;
      background-color: #27ba9b;
      color: #ffffff;
    }
  }
}
</style>
